import { ChangeEvent, useRef, useState } from "react";
import useRequest from "@/utils/useRequest";
import Modal,{ModalInstanceType} from "@/components/Modal";
import "./register.scss"
type registerPropsType = {

}
type ResponseType =   {
  [key:string] : string,
  id:string,
  firstName:string,
  lastName:string,
}
function registerPanel(props:registerPropsType){
  const [account,setAccount] = useState("");
  const [pwd,setPwd] = useState("");
  const [agree,setAgree] = useState(false);
  const [username,setUsername] = useState("");
  const [repwd,setRepwd] = useState("");
  const modalRef = useRef<ModalInstanceType>(null!);
  const handleChangeTel = (type:string,e:ChangeEvent<HTMLInputElement>) => {
      switch(type) {
        case "tel":
          setAccount(e.target.value);
          break;
        case "pwd":
          setPwd(e.target.value);
          break;
        case "username":
          setUsername(e.target.value);
          break;
        case "repwd":
          setRepwd(e.target.value);
          break;
      }
   }
 
 
   const {loading, error,fetchData,cancelRequest} = useRequest<ResponseType>("/api/register",{data:{
     username,
     account,
     pwd,
   },method:"POST"});
   
   const handleRegister = () => {
     if(!username) return modalRef.current.openModal("请输入用户名")
     if(!account) return modalRef.current.openModal("请输入手机号")
     if(!pwd) return  modalRef.current.openModal("请输入密码")
     if(!repwd) return modalRef.current.openModal("请再次输入密码")
     if(pwd !== repwd) return  modalRef.current.openModal("两次密码不一致")

     fetchData().then(res => {
         modalRef.current.openModal("登录成功");
         console.log(res.firstName);
     }).catch(err => {
       console.log(err);
     });
   }
    return <div className="register-form">
      <div className="register-form-content">
        <div className="form-item">
            <span className="form-item-title">用户名</span>
            <input value={username} className="form-item-content" type="text" placeholder="请输入用户名" onChange={(e) => handleChangeTel("username",e)}></input>
          </div>
          <div className="form-item">
            <span className="form-item-title">手机号</span>
            <input value={account} className="form-item-content" type="text" placeholder="请输入手机号" onChange={(e) => handleChangeTel("tel",e)}></input>
          </div>
          <div className="form-item">
            <span className="form-item-title">密码</span>
            <input value={pwd}  className="form-item-content" type="password" placeholder="请输入密码" onChange={(e) => handleChangeTel("pwd",e)}></input>
          </div>
          <div className="form-item">
            <span className="form-item-title">确认密码</span>
            <input value={repwd}  className="form-item-content" type="password" placeholder="请再次输入密码" onChange={(e) => handleChangeTel("repwd",e)}></input>
          </div>
          <div className="form-register-btn" onTouchStart={handleRegister}>
                    注册
          </div>
    </div>
    <Modal ref={modalRef}></Modal>
</div>;
}

export default registerPanel;